<template>
  <div>
    <div><h3 align="center">若兮系统日志列表</h3></div>
  <el-table
      :data="logs"
      style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="操作人">
            <span>{{props.row.logOperatorName}}</span>
          </el-form-item>
          <el-form-item label="所属类型">
            <span>{{ props.row.logOperatorType }}</span>
          </el-form-item>
          <el-form-item label="日志序号">
            <span>{{ props.$index +1 }}</span>
          </el-form-item>
          <el-form-item label="所属职位">
            <span>{{ props.row.logDeptName }}</span>
          </el-form-item>
          <el-form-item label="操作类型">
            <span>{{ props.row.logBusinessType }}</span>
          </el-form-item>
          <el-form-item label="操作时间">
            <span>{{ props.row.logOperatorTime }}</span>
          </el-form-item>
          <el-form-item label="操作事项">
            <span>{{ props.row.logOperate }}</span>
          </el-form-item>
          <el-form-item label="请求路径">
            <span>{{ props.row.logOperatorUrl }}</span>
          </el-form-item>
          <el-form-item label="请求方法">
            <span>{{ props.row.logMethod }}</span>
          </el-form-item>
          <el-form-item label="请求方式">
            <span>{{ props.row.logRequestMethod }}</span>
          </el-form-item>
          <el-form-item label="请求状态">
            <el-tag v-show="props.row.logStatus === 'SUCCESS'" type="success">{{props.row.logStatus}}</el-tag>
            <el-tag v-show="props.row.logStatus === 'FAIL'" type="danger">{{props.row.logStatus}}</el-tag>
          </el-form-item>
          <el-form-item label="IPv4地址">
            <span>{{ props.row.logOperatorIp }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
        label="日志序号"
        width="150px"
        align="center">
      <template slot-scope="scope">
        {{ scope.$index +1 }}
      </template>
    </el-table-column>
    <el-table-column
        label="操作人"
        prop="logOperatorName"
        align="center">
    </el-table-column>
    <el-table-column
        label="操作事项"
        prop="logOperate"
        align="center">
    </el-table-column>
    <el-table-column
        label="操作时间"
        prop="logOperatorTime"
        align="center">
    </el-table-column>
    <el-table-column
        label="操作" width="150px" align="center">
      <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="只有若兮超级管理员才有操作日志权限!" placement="top">
            <el-button @click="deleteLog(scope.row.logId)" size="small" type="danger" icon="el-icon-delete">删除日志</el-button>
          </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
    <el-tooltip class="item" effect="dark" content="点我加载更多" placement="top">
      <el-button @click="more" circle style="margin-left: 500px;margin-top: 20px" :loading="bottomLoading" >更多</el-button>
    </el-tooltip>
    <div>
      <el-dialog
          title="警告"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <span>确认删除该条日志吗?</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="cancel()">取 消</el-button>
    <el-button @click="confirm" type="primary">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				bottomLoading: false,
        baseUrl: 'http://localhost/admin/log/',
        deleteLogId: 0,
				currentPage: 1,
        pageSize: 5,
        total: 0,
				logs: [{
					logId: 1,
					logModule: '后台管理中心',
					logBusinessType: 'INSERT',
					logMethod: 'addUser()',
					logRequestMethod: 'POST',
					logOperatorType: 'Admin',
					logOperatorName: '姚显',
					logDeptName: 'Super_Admin',
					logOperatorUrl: '/admin/add',
					logOperatorIp: '127.0.0.1',
					logStatus: 'success',
					logOperatorTime: '2020-12-08',
					logOperate: '管理员添加用户'
				}],
				logsTemp: [{
					logId: 1,
					logModule: '后台管理中心',
					logBusinessType: 'INSERT',
					logMethod: 'addUser()',
					logRequestMethod: 'POST',
					logOperatorType: 'Admin',
					logOperatorName: '姚显',
					logDeptName: 'Super_Admin',
					logOperatorUrl: '/admin/add',
					logOperatorIp: '127.0.0.1',
					logStatus: 'success',
					logOperatorTime: '2020-12-08',
					logOperate: '管理员添加用户'
				}]
			}
		},
		created() {
			this.getLogList()
		},
		methods: {
			cancel(){
				this.dialogVisible = false
      },
      confirm(){
				var vm = this
				this.axios({
					method: 'DELETE',
					url: vm.baseUrl + 'delete',
					params: { 'logId': vm.deleteLogId }
				}).then(async function(resp) {
					if (resp.data.status === 'ok'){
						vm.total = 0
            vm.currentPage = 1
						vm.$message({
							message: '删除日志成功!',
							type: 'success',
							center: true
						});
						vm.getLogList()
						vm.dialogVisible = false
					} else {
						vm.$message({
							message: '服务器忙,请稍后重试!',
							type: 'error',
							center: true
						});
					}
				})
      },
			deleteLog(logId){
				const vm = this
        vm.dialogVisible = true
        vm.deleteLogId = logId
      },
			more() {
				var vm = this
				if (vm.total - vm.currentPage*vm.pageSize < 1) {
					vm.$message({
						message: "没有更多数据了!",
						center: true
					})
				}else {
					vm.bottomLoading = true
					vm.currentPage = vm.currentPage + 1
					vm.getLogList()
				}
			},
			getLogList() {
				var vm = this
				this.axios({
					method: 'GET',
					url: vm.baseUrl + 'page/' +vm.pageSize,
					params: { 'currentPage' : vm.currentPage, 'pageSize' : vm.pageSize }
				}).then(function(resp) {
					if (vm.total === 0){
						vm.logs = resp.data.data.list
					}else {
						vm.logsTemp = resp.data.data.list
						vm.logs = vm.logs.concat(vm.logsTemp)
					}
					vm.total = resp.data.data.total
					vm.loading = false
					vm.bottomLoading = false
				})
			}
    }
	}
</script>
